<template>
	<view class="rules">
		<headertop :title="contentobj['title']" str1="oridei" :back1="back1"></headertop>
		<image src="https://jingwei.xunfuzhifuzaixian.com/static/images/Group 11891@2x.png" mode="widthFix"
			class="rulesback"></image>
		<view :style="{'margin-top':statusBarHeight+'px','height':barHeight+'px'}"></view>
		<view class="bottomContent">
			<view class="nr">
				<up-parse :content="contentobj['content']"></up-parse>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive,
	} from 'vue'
	import ulm, {
		$api
	} from '@/ulm';
	import {
		onLoad,
		onShow,
		onPageScroll,
		onReachBottom
	} from "@dcloudio/uni-app";
	const contentobj = ref({})

	import headertop from '@/components/header.vue'
	const back1 = ref('')
	const barHeight = ref('')
	const statusBarHeight = ref('')
	onLoad(() => {
		init()
	})

	onMounted(() => {
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		const {
			top,
			height
		} = wx.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;
	})
	async function init() {
		const res = await $api.article({
			id: 3
		})
		if (res.code == 1) {
			contentobj.value = res.data
		}
	}
</script>

<style lang="scss">
	.rules {
		width: 100%;
		overflow: hidden;
		position: relative;

		.rulesback {
			position: absolute;
			z-index: -1;
			width: 100%;
		}

		.bottomContent {
			width: 100%;
			box-shadow: 0rpx -4rpx 13rpx 0rpx rgba(201, 201, 201, 0.26);
			border-radius: 48rpx 48rpx 0rpx 0rpx;
			margin-top: 246rpx;
			overflow: hidden;
			background: #FFFFFF;

			.nr {
				width: 686rpx;
				margin: auto;
				margin-top: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #4E5969;
				overflow: hidden;
			}
		}
	}
</style>